require(['../config'], () => {
	require(['swiper', 'template', 'exzoom','Header','footer','fly',  'bootstrap', 'jquery', ],
	 (swiper, template, exzoom, Header,footer) => {
		class Detail {
			constructor() {
				this.loadDetail().then(() => {
					this.into()
					this.Guess()
					this.addTocart()
				})



			}

			loadDetail() {
				return new Promise((resolve) => {
					const id = location.search.slice(4)
					// console.log(id)
					$.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${id}&normal=1&sa=`, (resp) => {
						if (resp.code === 200) {
							this.Detaildata = resp.data
							// console.log(this.Detaildata)
							$('#detail-box').html(template('detail-boxTemplate', { ...this.Detaildata
							}))
							resolve()
						}
					})
				})
			}

			into() {
				$("#exzoom").exzoom({
					autoPlay: false,
				})
			}

			Guess() {
				return new Promise((resolve) => {
					$('#dddff').html(template('dddffTemplate', { ...this.Detaildata
						}),
						resolve())
				})
			}

			addTocart() {
				const id = location.search.slice(4)
				$.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${id}&normal=1&sa=`, (resp) => {
					if (resp.code === 200) {
						const {
							id,
							title,
							commodityDetailUrl,
							coupon,
							couponStatus,
							couponValue,
							descContentList,
							expireMsg,
							image,
							photo,
							originPrice,
							price,
							qunTitle,
							saleNum
						} = resp.data.detail
						this.detail = {
							id,
							title,
							commodityDetailUrl,
							coupon,
							couponStatus,
							couponValue,
							descContentList,
							expireMsg,
							image,
							photo,
							originPrice,
							price,
							qunTitle,
							saleNum
						}
						// console.log(this.detail)
					}
				})

				$('#btn-to-cart').on('click', (e) => {
					this.fly(e)
					let cart = localStorage.getItem('cart')
					//判断原理里面是否有数据，有就取出来push现在的，这样就可以一直加入新的商品了
					if (cart) {
						//这里面代表原来里面有数据
						//继续判断现在要加入的数据原理是否有，有的话加数量就行了，没有的话就push。
						cart = JSON.parse(cart)
						const isExist = cart.some((shop) => {
							return shop.id === this.detail.id
						})
						if (isExist) {
							//这里说明已经加入过购物车了，我们只需要加数量（count）就可以了
							cart = cart.map((shop)=>{
								if(shop.id === this.detail.id){
									shop.count++
								} 
								return shop
							})
						} else {
							cart.push({...this.detail,count:1,check:true})
						}
							localStorage.setItem('cart', JSON.stringify(cart))

					} else {
						localStorage.setItem('cart', JSON.stringify([{
							...this.detail,count:1,check:true}]))
					}
				})

			}
			
			fly(e){
				 $(`<img class="fly" src="${this.detail.photo[0].url}">`).fly({
				    start:{
				      left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
				      top: e.clientY,  //开始位置（必填）
				    },
				    end:{
				      left: $('.ToCart').offset().left - $(window).scrollLeft(), //结束位置（必填）
				      top:  $('.ToCart').offset().top - $(window).scrollTop(),  //结束位置（必填）
				      // width: 100, //结束时高度
				      // height: 100, //结束时高度
				    },
				    // autoPlay: false, //是否直接运动,默认true
				    speed: 0.8, //越大越快，默认1.2
				    vertex_Rtop:20, //运动轨迹最高点top值，默认20
				    onEnd: function(){
						this.destroy()
						Header.calcCartCount()
						// footer.rander()
					} //结束回调
				  })
			}
		}
		return new Detail()

	})
})
